<!doctype html>
<html>

<head>
  <meta charset="utf-8"/>
  <title>html5 data-attribute setup</title>
  <meta name="viewport" content="width=device-width">

  <style>
    .container {
      width: 320px;
      margin: 30px auto 0 auto;
      text-align: center;
    }

    .gauge {
      width: 320px;
      height: 320px;
    }

    .btn {
      margin: 30px 5px 0 2px;
      padding: 15px 20px;
    }
  </style>


</head>

<body>

  <div class="container">
    <div id="gg1" class="gauge" data-value="1200" data-min="0" data-max="1000000" data-gaugeWidthScale="0.6"></div>
    <input type="button" id="gg1_refresh" class="btn" value="Random Refresh" />
  </div>

  <script src="../raphael-2.1.4.min.js"></script>
  <script src="../justgage.js"></script>
  <script>
    document.addEventListener("DOMContentLoaded", function(event) {
      var gg1 = new JustGage({
        id: "gg1",
        formatNumber: true,
        counter: true
      });

      document.getElementById('gg1_refresh').addEventListener('click', function() {
        gg1.refresh(getRandomInt(0, 1000000));
        return false;
      });
    });
  </script>
</body>
</html>